<template>
	<view>
		<!-- 状态栏 -->
		<view class="statusBar" :style="'height:'+statusBarHeight+'px'"></view>
		<view class="myheader padding-sm font-sub-title">
			<text class="cuIcon-back margin-right-ssm" @click="back()"></text>
			绑定亲属
		</view>

		<view class="cu-item" style="margin-bottom: 30rpx;">
			<view class="cu-form-group">
				<view class="title" style="font-size: 32rpx;">亲属姓名</view>
				<input style="font-size: 32rpx;" placeholder="请输入姓名" name="name" v-model="name1"></input>
			</view>
			<view class="cu-form-group">
				<view class="title font-normal" style="font-size: 32rpx;">亲属电话</view>
				<input style="font-size: 32rpx;" type="number" class="font-normal" maxlength="11" placeholder="请输入电话" v-model="tel1" name="tel"></input>
			</view>
			<view class="cu-form-group">
				<view class="title font-normal" style="font-size: 32rpx;">亲属关系</view>
				<input style="font-size: 32rpx;" class="font-normal" placeholder="请输入关系" v-model="relation1" name="relation"></input>
			</view>
		</view>
		<view class="cu-item">
			<view class="cu-form-group">
				<view class="title font-normal" style="font-size: 32rpx;">亲属姓名</view>
				<input class="font-normal" style="font-size: 32rpx;" placeholder="请输入姓名" v-model="name2" name="name"></input>
			</view>
			<view class="cu-form-group">
				<view class="title font-normal" style="font-size: 32rpx;">亲属电话</view>
				<input class="font-normal" type="number" style="font-size: 32rpx;" maxlength="11" placeholder="请输入电话" v-model="tel2" name="tel"></input>
			</view>
			<view class="cu-form-group">
				<view class="title font-normal" style="font-size: 32rpx;">亲属关系</view>
				<input class="font-normal" style="font-size: 32rpx;" placeholder="请输入关系" v-model="relation2" name="relation"></input>
			</view>
		</view>
		
		<view class="text-center"><button class="cu-btn login-btn font-normal" @tap="save()">保 存</button></view>

	</view>
</template>

<script>
	import Vue from 'vue'
	var that
	import checkUtil from '@/utils/checkUtil.js'
	export default {
		data() {
			return {
				statusBarHeight:Vue.prototype.StatusBar,
				name1:'',
				tel1:'',
				relation1:'',
				name2:'',
				tel2:'',
				relation2:'',
				user:'',
			}
		},
		onLoad() {
			that = this;
			this.user = uni.getStorageSync("userInfo")
			this.name1=this.user.FAMILY_NAME1||''
			this.tel1=this.user.FAMILY_TEL1||''
			this.relation1=this.user.FAMILY_RELATION1||''
			this.name2=this.user.FAMILY_NAME2||''
			this.tel2=this.user.FAMILY_TEL2||''
			this.relation2=this.user.FAMILY_RELATION2||''
		},
		methods: {
			back(){
				uni.navigateBack();
			},
			save(){
				if(this.name1==''){
					uni.showToast({
						"title":"请至少输入第一亲属姓名",
						"position":"bottom",
						"icon":"none"
					})
					return ;
				}
				if(this.tel1==''){
					uni.showToast({
						"title":"请至少输入第一亲属电话",
						"position":"bottom",
						"icon":"none"
					})
					return ;
				}
				if(this.relation1==''){
					uni.showToast({
						"title":"请至少输入第一亲属关系",
						"position":"bottom",
						"icon":"none"
					})
					return ;
				}
				if(this.tel1!=''&&!checkUtil.checkPhone(this.tel1)){
					uni.showToast({
						"title":"请输入正确的电话号码",
						"position":"bottom",
						"icon":"none"
					})
					return ;
				}
				if(this.tel2!=''&&!checkUtil.checkPhone(this.tel2)){
					uni.showToast({
						"title":"请输入正确的电话号码",
						"position":"bottom",
						"icon":"none"
					})
					return ;
				}
				this.$http.bindRelatives({
					name1:that.name1,
					tel1:that.tel1,
					relation1:that.relation1,
					name2:that.name2,
					tel2:that.tel2,
					relation2:that.relation2
				}).then((res)=>{
					if(res.code==1){
						uni.showToast({
							"title":"保存成功！",
							"icon":"success"
						})
						that.user.FAMILY_NAME1 = that.name1
						that.user.FAMILY_TEL1 = that.tel1
						that.user.FAMILY_RELATION1=that.relation1
						that.user.FAMILY_NAME2=that.name2
						that.user.FAMILY_TEL2=that.tel2
						that.user.FAMILY_RELATION2=that.relation2
						uni.setStorageSync("userInfo",that.user)
					}else{
						uni.showToast({
							"title":res.message,
							"position":"bottom",
							"icon":"none"
						})
					}
				})
			}
		}
	}
</script>

<style>
	page{
		background: #F0F0F0;
	}
	.cu-item-box{
		display: flex;
	}
	.login-btn {
		border-radius: 0;
		background-color: #427EE3!important;
		color: #fff;
		width: 100%;
		height: 80rpx;
		margin-top: 30rpx;
	}
	.text-center{
		margin:0 15px;
	}
</style>
